vue transition 过渡动画 从左向右进入，从右向左进入

弹窗从右向左进入

<transition name="moveR">

</transition>

<style lang="scss">

  .moveR-enter-active,  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }
   .moveR-enter,  .moveR-leave {
    transform: translateX(100%);
  }
   .moveR-leave-to{
     transform: translateX(100%);
   }
</style>

弹窗从左向右进入

<transition name="moveL">

</transition>

<style lang="scss">

     .moveL-enter-active,
     .moveL-leave-active {
         transition: all 0.3s linear;
         transform: translateX(0%);
     }
    .moveL-enter,
    .moveL-leave {
        transform: translateX(-100%);
    }
    .moveL-leave-to {
        transform: translateX(-100%);
    }
</style>

注意：在根节点的样式里不要加transform：translateX()属性，否则过渡会失效。例：

<template>
    <transition name="moveL">
        <div class="rotating" v-if="rotatShowStatus">

        </div>
    </transition>
</template>

<style lang="scss">
.rotating {
        position: absolute;
        top: 0;
        left: 58px;
        height: 100%;
        width: 300px;
        z-index: 998;
        /*transform: translateX(0%);*/ //加了这个属性 过渡动画会失效
        transition: all 0.3s;
        background-color: #041a2e;
        }
</style>